<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>清除浮动细节</title>
    <style>
      .clearfix::before,
      .clearfix::after {
        content: '';
        display: table;
      }
      .clearfix::after {
        clear: both;
      }
      .clearfix {
        *zoom: 1;
      }

      /* 
        添加清除浮动的细节:
        前一个容器中元素都是浮动的,而容器本身没有浮动,则会有以下两种情况:
        1.这个容器有高度并且高度足够,后面的容器不会产生错位叠加情况
          注意: 这种情况虽然看似没有问题,但是由于高度限定,在页面中内容是动态的情况下,并不能比较好的适配,
          即内容如果较多,超过了高度,则还是会产生问题(不推荐)

        2.这个容器没有高度,后面的容器会产生错位叠加情况
          清除浮动即可解决问题(推荐)

        总结: 
        以上情况优先使用清除浮动而不是给父级容器高度,因为在很多情况下,父级容器的高度是没有办法确定!
      */
      .box1 {
        width: 800px;
        /* height: 400px; */
        background-color: pink;
      }

      .box2 {
        width: 800px;
        height: 400px;
        background-color: powderblue;
      }

      .box1 .inner {
        float: left;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="inner" style="background-color: aqua"></div>
      <div class="inner" style="background-color: palegreen"></div>
    </div>
    <div class="box2">
      <div class="inner" style="background-color: aqua"></div>
      <div class="inner" style="background-color: palegreen"></div>
    </div>
  </body>
</html>
